import { useEffect, useState } from "react";
import style from "./style.module.scss";
import http from "@/api/axios";
import type { StoreInfo } from "@/Interface/StoreInfoInterface";


const TopList: React.FC = () => {
  const [topStores, setTopStores] = useState<StoreInfo[] | null>(null)

  useEffect(() => {
    const getData = async () => {
      try {
        const res = await http.get('/api/stores/stats');
        setTopStores(res.data.data.topStores);
      } catch (error) {
        console.error('初始化数据失败:', error);
      }
    }
    getData()
  }, [])


  return (
    <div className={style.toplist}>
      <table className={style.content}>
        <thead>
          <tr>
            <th>排名</th>
            <th>店名</th>
            <th>年营业额(万元)</th>
          </tr>
        </thead>
        <tbody>
          {topStores?.map((info, index) => (
            <tr key={info.basicInfo.storeId}>
              <td>top{index + 1}</td>
              <td>{info.basicInfo.storeName}</td>
              <td>{Number(info.annualData.yearAmount / 10000).toFixed(2)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

export default TopList